<template>
  <view class="hotalDetal" :style="{backgroundImage:`url(${hotals[index].img})`,backgroundSize: `100% 50%`,backgroundRepeat:'no-Repeat',}"> 
    <my-title :title="hotals[index].name" @myBack="back"></my-title>
    <view class="mid">
      <view class="star">
        <uni-rate :size="15" v-model="hotals[index].num"/>
        <text style="color: white;font-size: 10px;display: block;margin-left: 10rpx;">4.9 (1340)</text>
      </view>
      <text style="font-size: 25px;font-weight: bold;color: white;">{{hotals[index].name}}</text>
      <text style="font-size: 25px;font-weight: bold;display: block;padding-left: 90rpx;color: white;">— —给你最舒服的陪伴</text>
    </view>
    <view class="mid2">  
      <view class="icons" @click="changeIsStore()">
        <uni-icons :type="hotals[index].select?'heart-filled':'heart'" color="red" size="30"></uni-icons>
      </view>
      <view class="icon">
        <uni-icons type="top" size="30" color="gray"></uni-icons>
      </view>
      <text style="font-size: 15px;font-weight: bold;display: block;">{{hotals[index].name + '(' + hotals[index].site +')'}}</text>
      <view class="host">
        <text style="font-size: 10px;color:gray;">2022年装修 | 亲子主体房 | 家庭房 | 情侣方</text>
        <uni-icons type="right" size="15" color="gray"></uni-icons>
      </view>
      <view class="box">
        <view class="left">
          <view class="left-top">
            <view class="texts">
              <text style="color: white;background-color: #1296db; font-size: 14px;font-weight: bold;padding: 2rpx 8rpx;border-radius: 7px;">4.9</text>
              <text style="color: black;font-size: 14px;font-weight: bold;">1340条评论</text>
            </view>
            <uni-icons type="right" size="15"></uni-icons>
          </view>
          <text style="font-size: 12px;">服务卫生都是否到位</text>
        </view>
        <view class="right">
          <view class="rl" style="font-size: 15px;">
            <text style="font-weight: bold;display: block;margin-bottom: 10px;">距您离线36.6公里</text>
            <text style="font-size: 12px;">经二路 | 汉中路39浩</text>
          </view>
          <view class="rr">
            <uni-icons type="map-pin-ellipse" size="20"></uni-icons>
            <text style="color: #1296db;">地图</text>
          </view>
        </view>
      </view>
    </view>
    <view class="btm"> 
      <view class="top">
        <view class="left">
          <text>12月1日 后天</text>
          <text class="myText">1晚</text>
        </view>
        <view class="right" style="font-size: 10px;">
          <view class="icon1">
            <uni-icons type="arrow-down" size="15"></uni-icons>
            <text>低价日期</text>
          </view>
          <text style="height: 60%;width: 1px;color: black;background-color: gray;"></text>
          <view class="icon1">
            <uni-icons type="person-filled" size="15"></uni-icons>
            <text>一人间</text>
          </view>
        </view>
      </view>
      <view class="btmB">
        <view class="left">
          <image :src="hotals[index].sleepImg" style="width: 200rpx;height: 250rpx;border-radius: 20rpx;"></image>
        </view>
        <view class="right">
          <view class="title">
            <text style="font-size: 20px;font-weight: bold;display: block;margin-right: 50rpx;">温馨大房间</text>
            <uni-icons type="right" size="20"></uni-icons>
          </view>
          <text style="font-size: 10px;font-weight: bold;display: block;margin: 20rpx 0;">1张1.8米大床 2人入住 28平方 可吸烟</text>
          <view class="texts" style="font-size: 10px;font-weight: bold;margin-bottom: 20rpx;"> 
            <text style="margin-right: 20rpx;">无早餐</text>
            <text style="color: #1296db;">12月2日00：00前可免费取消</text>
          </view>
          <view class="btns">
            <text class="myText">先住后付</text>
            <text class="myText">立即确认</text>
          </view> 
          <view class="price" style="padding: 0 100rpx 0 100rpx">
            <text style="font-size: 10px;text-decoration:line-through;">￥203</text>
            <text style="font-size: 16px;color: red;">￥141</text>
          </view>
        </view>
      </view>
    </view>
    <view class="mybox" style="padding: 5px;width: 50px;height: 60px;text-align: center;padding-left:600rpx ;">
      <text style="background-color: #cc6600;color: white;border-radius: 7px;font-size: 10px;">6.9折</text>
      <view class="sticked" style="background-color: #1296db;border-radius: 10px;width: 100%;height: 85%">
        <text style="font-size: 20px;color: white">抢</text>
        <text style="font-size: 10px;display: block;color: #1296db;background-color: white;padding: 1px 5px;margin-top: 5px;border-radius: 10px;">在线付</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        index:0,
        hotals: [
          {
            name:'华研学院民宿',
            site:'陕西-西安-临潼-山谷大道',
            num:4,
            select:false,
            img:'http://img0.baidu.com/it/u=2389130720,2692666766&fm=253&fmt=auto&app=138&f=PNG',
            sleepImg:'http://t15.baidu.com/it/u=2637028033,411489182&fm=224&app=112&f=JPEG'
          },
          {
            name:'华研学院民宿',
            site:'陕西-西安-临潼-山谷大道',
            num:3,
            select:false,
            img:'https://img1.baidu.com/it/u=1199724720,2073191019&fm=253&fmt=auto&app=138&f=JPEG',
            sleepImg:'https://img0.baidu.com/it/u=2751772257,3376824728&fm=253&fmt=auto&app=120&f=JPEG'
          },
          {
            name:'华研学院民宿',
            site:'陕西-西安-临潼-山谷大道',
            num:5,
            select:false,
            img:'https://img2.baidu.com/it/u=2578024604,3427106641&fm=253&fmt=auto&app=138&f=JPEG',
            sleepImg:'https://img1.baidu.com/it/u=2078957187,1102056558&fm=253&fmt=auto&app=138&f=JPEG'
          }
        ]
      };
    },
    onLoad(option) {
      console.log('来了hotalDetail')
      this.index = option.data
    },
    methods: {
      changeIsStore() {
        console.log('来啦')
        this.hotals[this.index].select = !this.hotals[this.index].select
      },
      back() {
        console.log('detail')
        // uni.navigateBack({
        //     //关闭当前页面，返回上一页面或多级页面。
        //     delta:1
        // });
        uni.redirectTo({
          url:'/subpkg/hotal/hotal'
        })
      }, 
    }
  }
</script>

<style lang="scss">
  .myText {
    display: block;
    background: rgba(0, 0, 0, 0.2);
    padding: 2rpx 10rpx;
    margin: 0 20rpx;
    border-radius: 10px;
  }
  .hotalDetal {
    .mid {
      padding: 0 20rpx;
      margin: 200rpx 0 30rpx 0;
      .star {
        display: flex;
      }
    }
    .mid2 {
      padding: 10rpx 20rpx 40rpx 20rpx;
      background-color: white;
      border-radius: 20px;
      position: relative;
      // margin-bottom: 40rpx;
      .icon {
        text-align: center;
      }
      .host {
        margin: 20rpx 0;
        padding-right: 100rpx;
        display: flex;
        justify-content: space-between;
      }
      .box {
        display: flex;
        height: 120rpx;
        justify-content: space-between;
        
        .left {
          width: 40%;
           background-color: #efefef;
           padding: 10rpx;
           text-align: center;
           display: flex;
           flex-direction: column;
           align-items: center;
           border-radius: 15px;
          .left-top {
            display: flex;
            justify-content: space-around;
            .texts {
              margin-bottom: 20rpx;
            }
          }
        }
        .right {
          width: 50%;
          border-radius: 15px;
          display: flex;
          justify-content: space-around;
          background-color: #efefef;
          padding: 10rpx;
          .rl {
            display: flex;
            flex-direction: column;
            
          }
          .rr {
            margin-left: 10rpx;
            text-align: center;
            display: flex;
            flex-direction: column;
          }
        }
      }
    }
    .btm {
      border-radius: 20px;
      padding: 20rpx 20rpx;
      margin-top: 20rpx;
      background-color: white;
      .top {
        display: flex;
        justify-content: space-between;
        .left {
          display: flex;
          justify-content: space-around;
          text-align: 12px;
          // font-weight: bold;
          align-items: center;
        }
        .right {
          display: flex;
          justify-content: space-around;
          align-items: center;
          .icon1 {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 15rpx 10rpx;
            font-size: 10px;
          }
        }
      }
      .btmB {
        display: flex;
        justify-content: baseline;
        padding: 20rpx;
        .left {}
        .right {
          margin-left: 10rpx;
          .title {
            display: flex;
          }
          .texts {
            font-size: 10rpx;
          }
          .btns {
             display: flex;
             justify-content: space-around;
             font-size: 12px;
             margin-bottom: 10rpx;
          }
        }
      }
    }
    position: relative;
    .mybox {
      position: absolute;
      // position: sticky;
      // right: 0rpx;
      // bottom: 100rpx;
      bottom: 10rpx;
      right: 0rpx;
    }
  }
.icons{
      width:40px;
      height: 40px;
      border-radius: 60%;
      background-color: white;
      position: absolute;
      right: 50rpx;
      top:-35rpx;
      align-items: center;
      display: flex;
      justify-content: center;
    }
</style>
